<template>
  <base-item title="事项办结情况">
    <template #content>
      <div class="item-style2" id="item-style3">

      </div>
    </template>
  </base-item>
</template>

<script setup lang="ts">
//组件
import BaseItem from "@/views/home/compoments/baseItem.vue";

//接口


//api
import {onMounted, reactive, ref} from 'vue';
import * as echarts from 'echarts'
import useSystemStore from "@/store/modules/system/system";
import useHomeStore from "@/store/modules/home/home";
//data
let mychart: any = null
let optionBar = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: [0, 0.01],
    data: useSystemStore().cityRange.map((item) => item.name1),
    axisLabel: {
      fontSize: 16,
      color: 'rgb(16,16,16)'
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(110,112,121)', //一点点的那个线条的颜色
      },
    },
  },
  yAxis: {
    type: 'value',
    name: '(%)',
    nameTextStyle: {
      color: "#101010",
      fontSize: 16,
      padding: [0, 0, 0, -40]
    },
    axisLabel: {
      fontSize: 16,
      color: 'rgb(16,16,16)'
    },
  },
  series: [
    {
      barGap: '0',
      name: '办结率',
      type: 'bar',
      data: [] as string[],
      label: {
        show: true,
        color: 'rgb(186,158,240)',
        position: 'top'
      },
      itemStyle: {
        color: 'rgb(186,158,240)'
      }
    },
  ]
};
let otpionLine = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: [0, 0.01],
    data: [] as any[],
    axisLabel: {
      fontSize: 16,
      color: 'rgb(16,16,16)'
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(110,112,121)', //一点点的那个线条的颜色
      },
    },
  },
  yAxis: {
    type: 'value',
    name: '(宗)',
    nameTextStyle: {
      color: "#101010",
      fontSize: 16,
      padding: [0, 0, 0, -40]
    },
    axisLabel: {
      fontSize: 16,
      color: 'rgb(16,16,16)'
    },
  },
  series: [
    {
      type: 'line',
      itemStyle: {
        color: 'rgb(204,173,255)'
      },
      lineStyle: {
        color: 'rgb(204,173,255)'
      },
      areaStyle: {
        color: 'rgb(240,220,255)'
      },
      emphasis: {
        focus: 'series'
      },
      data: [] as any[],
      label: {
        show: true,
        color: 'rgb(204,173,255)',
        fontSize: 16
      }
    },
  ]
};
const homeStore = useHomeStore()
const systemStore = useSystemStore()
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const initEcahts = () => {
  if (mychart != null && mychart.dispose) {
    mychart.dispose();
  }
  if (homeStore.platformId == 0) {
    let y1: string[] = []
    let y2: string[] = []
    systemStore.cityRange.forEach((city, index) => {
      homeStore.itemStyle3Data.forEach((item: any) => {
        if (city.name1 == item.areaName || city.name2 == item.areaName) {
          if (item.bjl == '-' || item.bjl == '0') {
            item.bjl = '0.00'
          }
          if (item.myl == '-' || item.myl == '0') {
            item.myl = '0.00'
          }
          y1.push(item.bjl)
        }
      })
    })
    optionBar.series[0].data = y1
    mychart = echarts.init(document.getElementById('item-style3'))
    mychart.setOption(optionBar)
  } else {
    mychart = echarts.init(document.getElementById('item-style3'))
    let xData: any[] = []
    let yData: any[] = []
    homeStore.itemStyle3Data.forEach((item: any) => {
      xData.push(item.month)
      yData.push(item.num)
    })
    otpionLine.xAxis.data = xData
    otpionLine.series[0].data = yData
    mychart.setOption(otpionLine)
  }

}

defineExpose({
  initEcahts
})

</script>

<style lang="scss">
#item-style3 {
  width: 102%;
  height: 245px;
}
</style>
